<template>
  <div style="width:100%;height:100%;">
    <div class="navbar">
      <el-button type="primary" size="medium" @click="SaveDocument" v-loading.fullscreen.lock="fullscreenLoading" v-if="readWord === 'edit'">保存</el-button>
      <el-button type="success" size="medium" @click="WebOpenPrint">打印文档</el-button>
      <el-button type="danger" size="medium" @click="WebClose">关闭窗口</el-button>
    </div>
    <div id="office" style="width:100%;height:100%;"></div>
  </div>
</template>
<script>
  import Vue from 'vue';
  import {mapGetters} from "vuex";
  import webOfficeTpl from '../../../static/webOffice/iWebOffice2015.js';
  export default {
    data() {
      return {
        fullscreenLoading: false,
        webOffice: null,
        webOfficeObj: null,
        webUrl: '',
        fileUrl: '',
        userName: '',
        readWord: 'view'
      }
    },
    computed: {
      ...mapGetters(["userInfo"])
    },
    beforeCreate(){
    },
    mounted(){
      const domain = (new URL(this.$route.query.url))
      this.webUrl = domain.origin
      this.fileUrl = domain.pathname
      if (this.$route.query.type) this.readWord = this.$route.query.type
      this.userName = this.userInfo.realname || this.userInfo.realname || ""
      this.$nextTick(() => {
        this.initWebOffice();
        this.initWebOfficeObject();
      })
    },
    beforeDestroy() {
    },
    methods: {
      SaveDocument() {
        this.fullscreenLoading = true
        this.webOfficeObj.WebSave2((e) => {
          this.fullscreenLoading = false
          this.webOfficeObj.Alert(e)
          // this.webOfficeObj.ClearDirectory()
        })
      },
      WebOpenPrint() {
        this.webOfficeObj.WebOpenPrint()
      },
      WebClose() {
        window.close();
      },
      initWebOffice() {
        this.webOffice = new Vue({
          template: webOfficeTpl
        }).$mount('#office');
      },
      initWebOfficeObject() {
        this.webOfficeObj = new WebOffice2015();
        this.webOfficeObj.setObj(document.getElementById('WebOffice2015'));
        this.webOfficeObj.ServerUrl = this.webUrl;
        this.webOfficeObj.accessToken = 'Bearer ' + this.$store.getters.access_token;
        this.webOfficeObj.RecordID = "";  //RecordID:本文档记录编号
        this.webOfficeObj.UserName = this.userName;
        this.webOfficeObj.FileType = ".doc"; //FileType:文档类型  .doc  .xls
        this.webOfficeObj.ShowWindow = true; //显示/隐藏进度条
        this.webOfficeObj.EditType = "1,1"; //设置加载文档类型 0 锁定文档，1无痕迹模式，2带痕迹模式
        this.webOfficeObj.MaxFileSize = 4 * 1024; //最大的文档大小控制，默认是8M，现在设置成4M。
        this.webOfficeObj.ShowWindow = true; //控制显示打开或保存文档的进度窗口，默认不显示
        this.webOfficeObj.ShowToolBar = 0; //ShowToolBar:是否显示工具栏:1显示,0不显示
        this.webOfficeObj.ShowMenuBar('0');
        this.webOfficeObj.ShowMenu = "0"; //控制整体菜单显示
        this.webOfficeObj.AllowEmpty = false;
        this.webOfficeObj.WebSetSkin(0xdbdbdb, 0xeaeaea, 0xeaeaea, 0xdbdbdb, 0xdbdbdb, 0xdbdbdb, 0x000000)
        this.webOfficeObj.WebSetMsgByName("USERNAME", this.userName); 	// 加载UserName
        
        this.webOfficeObj.WebOpen2(this.fileUrl); //打开该文档    交互OfficeServer  调出文档OPTION="LOADFILE"    调出模板OPTION="LOADTEMPLATE"     <参考技术文档>
        this.webOfficeObj.HookEnabled();
      },
    }
  }
</script>
<style lang="scss">
.navbar {
  display: flex;
  padding: 10px 10px 5px;
}
</style>